<script setup>
import {getCurrentInstance, reactive, ref} from 'vue'
import {useRouter} from "vue-router"
import useUserStore from "@/store/modules/user.js"
import {md5} from "js-md5";

const router = useRouter()
const userStore = useUserStore()
const {proxy} = getCurrentInstance()
const loading = ref(false)
const form = reactive({
  userName: '',
  password: '',
})
const formRef = ref(null)
const rules = {
  userName: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ]
}

const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (!valid) {

      loading.value = true
      userStore.login(form.userName, md5(form.password)).then(res => {
        proxy.$modal.okNotify('登录成功')
        router.push('/')
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
</script>

<template>
  <a-row class="login-container">
    <a-col :lg="16" :md="12" class="left h-screen">
      <div>
        <div class="first-title">欢迎光临</div>
        <div class="sub-title">Vue+ElementPlus中后台管理系统</div>
      </div>
    </a-col>
    <a-col :lg="8" :md="12" class="right h-screen">
      <h2 class="title">欢迎回来</h2>
      <div class="divider">
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <div>
        <a-form :rules="rules" class="w-[250px]" :model="form" style="max-width: 600px"
                 size="default" ref="formRef">
          <a-form-item field="userName">
            <a-input v-model="form.userName" placeholder="请输入用户名" @keydown.enter="handleLogin">
              <template #prepend>
                <icon icon="ep:user" size="16px" color="#606266"/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item field="password">
            <a-input v-model="form.password" type="password" placeholder="请输入密码" @keydown.enter="handleLogin">
              <template #prepend>
                <icon icon="ep:lock" size="16px" color="#606266"></icon>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button class="w-[250px]" round color="#626aef
" type="primary" @click="handleLogin" :loading="loading">登 录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.login-container {
  @apply bg-indigo-500 min-h-screen;
}

.login-container .left {
  @apply flex items-center justify-center flex-col;
}

.login-container .right {
  @apply bg-light-50 flex items-center justify-center flex-col;
}

.login-container .left .first-title {
  @apply font-bold text-4xl text-light-50 mb-4;
}

.login-container .left .sub-title {
  @apply text-gray-200 text-sm;
}

.login-container .right .title {
  @apply font-bold text-3xl text-gray-800;
}

.login-container .right .divider {
  @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}
</style>
